<template>
  <div class="grid">
    <van-grid :border="false" :column-num="4" :gutter="0">
      <van-grid-item v-for="grid in grids" :to="{path:`/list/${grid.id}`}" :key="grid.id">
        <van-image fit="cover" width="46" height="46" :src="grid.icon" />
        <span style="font-size:14px;">{{grid.name}}</span>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
export default {
  props: {
    grids: {
      type: Array,
      required: true
    }
  }
};
</script>

<style lang="less" scoped>
/deep/ .van-grid-item__content{
  padding: 0 !important;
  padding-top:4px !important; 
}
</style>